<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="custom" tagdir="/WEB-INF/tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>${param.title}</title>
    <link href="${contextPath}/resources/css/weui/weui.css" rel="stylesheet">
    <style type="text/css">
        .listItem {
            position: relative;
            color: #888;
            margin-bottom: 5px;
            /*box-shadow: 0 0 5px #d0d0d0;*/
            /*border-top: 1px solid #d0d0d0;*/
            border-bottom: 1px solid #d0d0d0;
        }

        .listItem a {
            color: #888;
        }

        .listItem p {
            position: relative;
            padding: 10px 45px;
            border-bottom: 1px solid #f6f6f6;
            margin: 0;
            font-size: 15px;
            white-space: nowrap;
            overflow: hidden;
            width: 69%;
            text-overflow: ellipsis;
        }

        .listItem p:last-child {
            border: none;
        }

        .listItem .icon {
            width: 28px;
            height: 28px;
            position: absolute;
            top: 50%;
            left: 10px;
            margin-top: -12px;
        }

        .listItem .info {
            position: absolute;
            right: 5px;
            top: 50%;
            font-size: 80px;
            margin-top: -70px;
            opacity: 0.2;
        }

        .load_more {
            display: block;
            line-height: 40px;
            text-align: center;
            color: #888;
        }

        .load_more img {
            width: 15px;
            height: 15px;
        }
    </style>
</head>
<body>
<c:if test="${not empty listFrontDto.list}">
    <c:forEach items="${listFrontDto.list}" var="item" varStatus="status">
        <custom:front_article_list_item item="${item}"/>
    </c:forEach>
    <a class="load_more" href="javascript:void(0);">
        <img class="loadImg" style="display:none" src="${contextPath}/resources/css/weui/load.gif">
        加载更多
    </a>
</c:if>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    var pageNum = 2;
    $("body").on("click", ".load_more", function () {
        $.ajax({
                    url: '${contextPath}/article/load_more',
                    data: {currentPage: pageNum, rowSize:${listFrontDto.rowSize}},
                    beforeSend: function () {
                        $(".loadImg").css("display", "inline-block");
                    },
                    success: function (result) {
                        $(".listItem:last").after(result);

                        $(".loadImg").css("display", "none");
                        pageNum++;
                    }
                }
        );
        $(this).remove();
    });
</script>


</body>
</html>